<template>
  <common-layout>
    <div class="content">
      <div class="top">
        <span class="title">{{systemName}}</span>
      </div>
      <div class="login">
        <div class="title">{{activeTab==1?'用户':'扫码'}}登录</div>
        <a-form class="form" :form="form">
          <a-tabs size="large" v-model="activeTab" :tabBarStyle="{display: 'none'}" style="padding: 0 2px;">
            <a-tab-pane tab="账户密码登录" key="1">
              <a-form-item>
                <a-input
                  autocomplete="autocomplete"
                  size="large"
                  placeholder="admin"
                  v-decorator="['name', {rules: [{ required: true, message: '请输入账户名', whitespace: true}]}]"
                >
                  <a-icon slot="prefix" type="user" />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input-password
                  size="large"
                  placeholder="123456"
                  autocomplete="autocomplete"
                  type="password"
                  v-decorator="['password', {rules: [{ required: true, message: '请输入密码', whitespace: true}]}]"
                >
                  <a-icon slot="prefix" type="lock" />
                </a-input-password>
              </a-form-item>
              <div>
                <a-checkbox :defaultChecked="true">自动登录</a-checkbox>
                <a href="javascript:;" style="float:right;color:#004a95;">忘记密码</a>
              </div>
            </a-tab-pane>
            <a-tab-pane tab="手机号登录" key="2">
              <div style="text-align:center;">
                <img src="@/assets/img/ewm.png" alt="" srcset="" style="width:151px;height:151px;">
              </div>
            </a-tab-pane>
          </a-tabs>
          
          <a-form-item>
            <a-button :loading="logging" style="width: 100%;margin-top:24px;background-color:#004a95;border-color:#004a95;" size="large" type="primary" @click="btnClick(0)">{{activeTab==1?'登录':'返回'}}</a-button>
          </a-form-item>
          <div style="text-align: center;">
            <router-link class="register" to="#" style="color:#999">没有账号? 去注册</router-link>
          </div>
        </a-form>
        <img class="change-img" v-show="activeTab==1" @click="btnClick(1)" src="@/assets/img/ewm_litttle.png" alt="" style="float: right">
      </div>
    </div>
    <Vcode class="v-code" :canvasWidth="300" :canvasHeight="150" :puzzleScale="0.9" :sliderSize="40" :show="isShow" @success="success" @close="isShow=false" />
  </common-layout>
</template>

<script>
import CommonLayout from '@/layouts/CommonLayout'
import {login, getRoutesConfig} from '@/services/user'
import {setAuthorization} from '@/utils/request'
import {loadRoutes} from '@/utils/routerUtil'
import {mapState,mapMutations} from 'vuex'
import Vcode from "vue-puzzle-vcode";

export default {
  name: 'Login',
  components: {CommonLayout,Vcode},
  data () {
    return {
      logging: false,
      form: this.$form.createForm(this),
      activeTab: '1',
      isShow: false,
      check: true
    }
  },
  computed: {
    ...mapState('setting',['systemName'])
  },
  methods: {
    ...mapMutations('account', ['setUser', 'setPermissions', 'setRoles']),
    btnClick(type){
      switch(type){
        case 0:
          if(this.activeTab==2){
            this.activeTab='1';
            return false;
          }
          this.isShow=true;
          break;
        case 1:
          if(this.activeTab==1){
            this.activeTab='2';
          }else{
            this.activeTab='1';
          }
          break;
      }
      
    },
    afterLogin(res) {
      this.logging = false
      const loginRes = res.data
      if (loginRes.code >= 0) {
        const {user, permissions, roles} = loginRes.data
        this.setUser(user)
        this.setPermissions(permissions)
        this.setRoles(roles)
        setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
        // 获取路由配置
        getRoutesConfig().then(result => {
          const routesConfig = result.data.data
          loadRoutes(routesConfig)
          this.$router.push('/desktop')
          this.$message.success(loginRes.message, 3)
        })
      } else {
        this.$message.error(loginRes.message, 3)
      }
    },
    success(){
      this.isShow = false;
      this.form.validateFields((err) => {
        if (!err) {
          this.logging = true
          const name = this.form.getFieldValue('name')
          const password = this.form.getFieldValue('password')
          login(name, password).then(this.afterLogin)
        }
      })

    },
  }
}
</script>

<style lang="less">
  .common-layout{
    .content{
      width: 100%;
      height: 100vh;
      background-image: url('../../assets/img/login_bg.jpg');
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .top {
      width: 486px;
      margin: 0 auto;
      padding-bottom: 120px;
      text-align: center;
      height: 38px;
      line-height: 38px;
      .title {
        font-size: 32px;
        color: #fff;
        font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
        font-weight: 600;
        position: relative;
        top: 2px;
      }
    }
    .login{
      width: 486px;
      margin: 0 auto;
      position: relative;
      background-color: @layout-bg-color;
      border-radius: 5px;
      box-shadow: 0 2px 20px rgb(0 0 0 / 10%);
      padding: 30px;
      .ant-checkbox-checked .ant-checkbox-inner{
        background-color: #004a95;
        border-color: #004a95;
      }
      .ant-input-affix-wrapper:hover .ant-input,.ant-input:focus,.ant-input:hover,.ant-checkbox-checked::after{
        border-color: #004a95;
      }
      .ant-input:focus{
        box-shadow: 0 0 0 2px rgb(0 74 149 / 20%)
      }
      .title{
        font-size: 22px;
        color: #004a95 !important;
        margin-bottom:20px;
      }
      .form{
        width: 80%;
        margin: 0 auto;
      }
      .register{
        color:#999;
      }
      .register:hover{
        color: @primary-color !important;
      }
      .change-img{
        position: absolute;
        right: 0;
        bottom: 0;
      }
      .icon {
        font-size: 24px;
        color: @text-color-second;
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: @primary-color;
        }
      }
    }
  }
</style>
